<template>
	<view>
		<view class="head_box"></view>
		<view class="main">
			<view class="main_box">
				<view class="main_head">
					<view class="main_head_box" v-for="(item,index) in headLs" :key="index" @click="jump(index)">
						<image :src="item.img" mode=""></image>
						<text>{{item.txt}}</text>
					</view>
				</view>
				<view class="main_detail_one">
					<view class="main_detail_one_title">
						您已累计邀请{{invitationInfo.referrerCustomerNum}}人，开启盲盒{{invitationInfo.openBoxNum}}个</view>
					<view class="main_detail_one_total">
						<!-- <text class="detail_one_total_txt">总计签数：</text> -->
						<image class="zjqs_img" src="../../../static/blindbox/jackpot/zjqs.png" mode="widthFix"></image>
						<text class="detail_one_total_num">{{invitationInfo.total}}</text>
					</view>
					<view class="main_detail_one_money">{{jackpotInfo.stageName}}开奖<text v-if="jackpotInfo.stageBalance!=0">(剩余{{jackpotInfo.stageBalance}}元)</text>
					</view>
					<view class="main_detail_one_progress">
						<view class="progress_box">
							<view class="progress_box_detail" :style="{width: progress+'%'}"></view>
							<view class="envelopes_box" :style="{left: item.leftWidth+'%'}"
								v-for="(item,jIndex) in jackpotList" :key="jIndex">
								<image class="envelopes_img" :src="item.img" mode="" v-if="jackpotList.length>0">
								</image>
								<view class="envelopes_num">
									<text>{{item.money}}</text>
									<text style="font-size: 16rpx;">万</text>
								</view>
								<!-- <view class="envelopes_num_box">
									<image class="envelopes_num_box_img"
										src="@/static/blindbox/jackpot/envelopes_num_box.png" mode=""></image>
									<view class="envelopes_num_box_num">10000元</view>
								</view> -->
							</view>
							<view class="envelopes_num_box" :style="{left: progress - 2+'%'}">
								<image class="envelopes_num_box_img"
									src="@/static/blindbox/jackpot/envelopes_num_box.png" mode=""></image>
								<view class="envelopes_num_box_num">{{jackpotInfo.accumulatedAwardPool}}元</view>
							</view>
						</view>
						<view class="progress_num">{{progress}}%</view>
					</view>
					<view class="main_detail_one_button">
						<view class="button_box_one button" @click="invitation">邀请好友</view>
						<view class="button_box_two" @click="jumpBlindbox">开启盲盒</view>
					</view>
				</view>
				<view class="main_detail_two">
					<view class="main_detail_two_box">
						<view class="detail_two_box_num">
							<text class="money_icon">￥</text>
							<text>{{jackpotInfo.accumulateMoney}}</text>
						</view>
						<view class="detail_two_box_title">目标奖池</view>
					</view>
					<view class="main_detail_two_box">
						<view class="detail_two_box_num">
							<text class="money_icon">￥</text>
							<text>{{jackpotInfo.accumulatedAwardPool}}</text>
						</view>
						<view class="detail_two_box_title">已累计奖池</view>
					</view>
					<view class="main_detail_two_box">
						<view class="detail_two_box_num">
							<text>{{jackpotInfo.totalNum}}</text>
						</view>
						<view class="detail_two_box_title">总签数</view>
					</view>
				</view>
				<view class="main_detail_three">
					<view class="main_detail_three_box" v-for="(item,numIndex) in activityJackpotList" :key="numIndex">
						<view class="main_detail_three_box_l" :class="item.status=='2'?'active_color':''">
							<text>{{item.stageName}}</text>
							<text style="font-size: 32rpx;margin: 0 10rpx 0 12rpx;">￥{{item.accumulateMoney}}</text>
							<text style="font-size: 26rpx;" v-if="item.status=='2'">(已开奖)</text>
						</view>
						<view class="main_detail_three_box_r" :class="item.status=='2'?'active_color':''">
							<text v-if="item.status=='1'">(未开奖)</text>
							<text v-if="item.status=='2'" style="font-weight: 400;"
								@click="getNameList(item)">中奖名单</text>
							<image class="right_icon" src="@/static/blindbox/jackpot/right_icon.png"
								v-if="item.status=='2'" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<winner-list ref="winnerList" :id="id"></winner-list>
		<invitation-tasks ref="child"></invitation-tasks>
	</view>
</template>

<script>
	import winnerList from "@/components/winner-list/winner-list";
	export default {
		components: {
			winnerList,
		},
		data() {
			return {
				id: '',
				isShow: false, //显示中奖名单
				invitationInfo: {}, //邀请信息
				activityJackpotList: [], //奖池阶段数组
				jackpotInfo: [], //奖池信息
				headLs: [ //头部nav
					{
						img: '../../../static/blindbox/jackpot/prize_pool.png',
						txt: '奖池奖品'
					},
					{
						img: '../../../static/blindbox/jackpot/draw_ranking.png',
						txt: '抽奖排行'
					},
					{
						img: '../../../static/blindbox/jackpot/historical_lottery.png',
						txt: '历史开奖'
					},
				],
				jackpotList: [], //奖池数组
				progress: 0, //进度
			}
		},
		onLoad() {
			this.getBeeInvitationInfo()
			this.getCurrentBoxActivityJackpotList()
			this.getIndexJackpotInfo()
		},
		onHide() {
			uni.removeStorageSync('person-card');
		},
		methods: {
			jumpBlindbox(){
				window.location.href =  "/pages/pay/blindbox"
			},
			jump(index) {
				if (index == 0) { //跳转奖池奖品
					uni.navigateTo({
						url: '/pages/blindbox/jackpot/prize-pool/prize-pool'
					})
				} else if (index == 1) { //跳转抽奖排行
					uni.navigateTo({
						url: '/pages/blindbox/jackpot/ranking/ranking'
					})
				} else {
					uni.navigateTo({ //跳转历史开奖
						url: '/pages/blindbox/jackpot/historical-lottery/historical-lottery'
					})
				}
			},
			async getBeeInvitationInfo() { //获取邀请信息
				uni.showLoading()
				const res = await this.$api.getBeeInvitationInfo();
				this.invitationInfo = res.result
				uni.hideLoading()
			},
			async getIndexJackpotInfo() { //奖池首页
				const res = await this.$api.getIndexJackpotInfo();
				this.jackpotInfo = res.result
				this.progress = res.result.ratio
				uni.hideLoading()
			},
			async getCurrentBoxActivityJackpotList() { //获取当前盲盒活动奖池信息
				const res = await this.$api.getCurrentBoxActivityJackpotList();
				this.activityJackpotList = res.result
				this.getJackpotProgress(res.result)
				uni.hideLoading()
			},
			getJackpotProgress(list) { //获取奖池进度内容
				this.jackpotList = list
				this.jackpotList.forEach((item) => {
					item.money = parseFloat((item.accumulateMoney / 10000).toFixed(2))
					// item.leftWidth = (item.accumulateMoney/this.jackpotList[this.jackpotList.length-1].accumulateMoney*100).toFixed(0)
					if ((item.accumulateMoney / this.jackpotList[this.jackpotList.length - 1].accumulateMoney *
							100).toFixed(0) >= 87) {
						item.leftWidth = 87
					} else {
						item.leftWidth = (item.accumulateMoney / this.jackpotList[this.jackpotList.length - 1]
							.accumulateMoney * 100).toFixed(0) - 4
					}
					// item.leftWith = '20'
					item.img = '../../../static/blindbox/jackpot/envelopes_one.png'
				})
				if (this.jackpotList.length == 2) {
					this.jackpotList[0].img = '../../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[1].img = '../../../static/blindbox/jackpot/envelopes_two.png'
				} else if (this.jackpotList.length == 3) {
					this.jackpotList[0].img = '../../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[1].img = '../../../static/blindbox/jackpot/envelopes_two.png'
					this.jackpotList[2].img = '../../../static/blindbox/jackpot/envelopes_three.png'
				} else if (this.jackpotList.length == 4) {
					this.jackpotList[0].img = '../../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[1].img = '../../../static/blindbox/jackpot/envelopes_two.png'
					this.jackpotList[2].img = '../../../static/blindbox/jackpot/envelopes_three.png'
					this.jackpotList[3].img = '../../../static/blindbox/jackpot/envelopes_three.png'
				} else if (this.jackpotList.length == 5) {
					this.jackpotList[0].img = '../../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[1].img = '../../../static/blindbox/jackpot/envelopes_one.png'
					this.jackpotList[2].img = '../../../static/blindbox/jackpot/envelopes_two.png'
					this.jackpotList[3].img = '../../../static/blindbox/jackpot/envelopes_two.png'
					this.jackpotList[4].img = '../../../static/blindbox/jackpot/envelopes_three.png'
				} else {
					this.jackpotList[0].leftWidth = 87
					this.jackpotList[0].img = '../../../static/blindbox/jackpot/envelopes_three.png'
				}
				console.log(this.jackpotList)
			},
			getNameList(e) { //获取中奖名单
				this.id = e.id
				// this.isShow = true winnerList
				this.$refs.winnerList.open(this.id);
			},
			back() { //中奖名单弹窗返回
				this.isShow = false
			},
			invitation() {
				this.$refs.child.open();
			},
		}
	}
</script>

<style>
	page {
		background: #EC0B43;
	}

	view {
		box-sizing: border-box;
	}

	.head_box {
		height: 488rpx;
		background: url('/static/blindbox/jackpot/jackpot_index_bj.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
	}

	.main {
		padding: 0 20rpx 100rpx;
		margin-top: -108rpx;
	}

	.main_box {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 50rpx 30rpx 60rpx;
	}

	.main_head {
		display: flex;
		align-items: center;
		margin-bottom: 64rpx;
	}

	.main_head_box {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: #222222;
	}

	.main_head_box image {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 2rpx;
	}

	.main_detail_one {
		background-color: #FFECD3;
		border-radius: 24rpx;
		padding: 40rpx 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.main_detail_one_title {
		font-size: 34rpx;
		color: #222222;
		font-weight: bold;
		margin-bottom: 22rpx;
	}

	.main_detail_one_total {
		font-size: 34rpx;
		background: linear-gradient(90deg, #E19A4B 7.65%, #A4692D 87.65%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.zjqs_img{
		width: 170rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}
	.detail_one_total_txt{
		font-size: 34rpx;
		background: linear-gradient(90deg, #E19A4B 7.65%, #A4692D 87.65%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}
	.detail_one_total_num {
		font-size: 48rpx;
		background: linear-gradient(90deg, #E19A4B 7.65%, #A4692D 87.65%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}

	.main_detail_one_money {
		width: 496rpx;
		height: 64rpx;
		color: #fff;
		font-size: 30rpx;
		background: linear-gradient(90deg, #FFECD3 0%, #FE6E21 20.06%, #F4580D 77.03%, #FFECD3 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 36rpx;
		/* padding: 0 68rpx; */
	}

	.main_detail_one_progress {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 60rpx 0 106rpx;
	}

	.progress_box {
		width: 528rpx;
		height: 24rpx;
		border-radius: 200rpx;
		background: #F1D6C0;
		position: relative;
	}

	.progress_box_detail {
		height: 24rpx;
		border-radius: 200rpx;
		background: linear-gradient(180deg, #F4B540 0%, #FDEA60 51.35%, #F4B540 100%);
	}

	.progress_num {
		font-size: 24rpx;
		color: #FF3F1E;
	}

	.envelopes_box {
		width: 82rpx;
		height: 56rpx;
		position: absolute;
		left: 80rpx;
		top: -14rpx;
	}

	.envelopes_img {
		width: 82rpx;
		height: 56rpx;
		position: absolute;
		left: 0rpx;
	}

	.envelopes_num {
		width: 82rpx;
		height: 56rpx;
		line-height: 74rpx;
		text-align: center;
		position: absolute;
		font-size: 20rpx;
		color: #FBFF21;
	}

	.envelopes_num_box {
		width: 106rpx;
		height: 42rpx;
		position: absolute;
		bottom: -68rpx;
		left: 0%;
		/* left: -16rpx; */
		/* margin-top: 24rpx; */
		/* margin-left: calc(20% - 54rpx); */
		/* margin-left: 70rpx */
	}

	.envelopes_num_box_img {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.envelopes_num_box_num {
		width: 100%;
		height: 100%;
		z-index: 1;
		font-size: 18rpx;
		color: #FF5639;
		text-align: center;
		line-height: 50rpx;
		position: absolute;
	}

	.main_detail_one_button {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
	}

	.button_box_one {
		width: 200rpx;
		height: 68rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 68rpx;
		color: #fff;
		font-size: 30rpx;
		background: linear-gradient(90deg, #FF9A3D 3.08%, #FD5D04 100%);
	}

	.button_box_two {
		width: 200rpx;
		height: 68rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 68rpx;
		color: #fff;
		font-size: 30rpx;
		background: linear-gradient(90deg, #FF7759 3.08%, #FF0C0C 100%);
		margin-left: 68rpx;
	}

	.main_detail_two {
		background: #FFECD3;
		border-radius: 24rpx;
		padding: 40rpx 0;
		margin: 24rpx 0;
		display: flex;
		align-items: center;
	}

	.main_detail_two_box {
		width: calc(100% / 3);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.detail_two_box_num {
		color: #FF3F1E;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 6rpx;
	}

	.detail_two_box_title {
		font-size: 26rpx;
		color: #222222;
	}

	.money_icon {
		font-size: 30rpx;
		font-weight: 400;
	}

	.main_detail_three {
		background: #FFECD3;
		border-radius: 24rpx;
		padding: 30rpx 14rpx 0 20rpx;
	}

	.main_detail_three_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 26rpx;
	}

	.main_detail_three_box_l {
		color: #CEAB7C;
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}

	.active_color {
		color: #FF3F1E !important;
		font-weight: bold;
	}

	.main_detail_three_box_r {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #CEAB7C;
	}

	.right_icon {
		width: 11rpx;
		height: 14rpx;
		margin-left: 4rpx;
	}
</style>
